@import "title.scss";
@import "filterNav.scss";
.md10{
   .title{
     height: 42px;
     width: 100%;
     margin-bottom: 24px;
     position: relative;
     .more{
       position: absolute;
       right: 61px;
       bottom: 19px;
       color:$secFont;
       &:hover{
        color: #57b854;
       }
      }
   }
   .row {
      margin-left: -29px;
      margin-right: -29px;
   }
   .item {
     float: left;
     width: 119px;
     height: 254px;
     margin: 0 29px;
     .bookImg {
       width: 100%;
       height: 160px;
       background-size: cover;
       background-repeat: no-repeat;
       margin-bottom: 10px;
     }
     .name {
       font-size: 16px;
       text-align: center;
       margin-bottom: 10px;
       @include  textOver();
      }
     .author {
        font-size: 14px;
        @include textOver();
        color: $secFont;
        text-align: center;
     }
   }
}

.md8{
  .title{
    height: 42px;
    width: 100%;
    margin-bottom: 24px;
    position: relative;
    .more{
      position: absolute;
      right: 61px;
      bottom: 19px;
      color:$secFont;
      &:hover{
        color: #57b854;
      }
    }
  }
  .row {
    margin-left: -18px;
    margin-right: -18px;
  }
  .item {
    float: left;
    width: 180px;
    margin: 0 18px;
    .bookImg {
      width: 100%;
      height: 133px;
      background-size: cover;
      background-repeat: no-repeat;
      margin-bottom: 15px;
    }
    .name {
      font-size: 16px;
      text-align: center;
      margin-bottom: 40px;
      @include textOver();
    }
    .author {
      font-size: 14px;
      @include textOver();
      color: $secFont;
      text-align: center;
    }
  }
}

.md5 {
  .title{
    height: 42px;
    width: 100%;
    margin-bottom: 24px;
    position: relative;
    .more{
      position: absolute;
      right: 1px;
      bottom: 19px;
      color:$secFont;
      &:hover{
        color: #57b854;
      }
    }
  }
  .row {
    margin-left: -35px;
    margin-right: -35px;
    .item {
      float: left;
      width: 184px;
      height: 313px;
      margin: 0 35px;
      .bookImg {
        width: 100%;
        height: 241px;
        background-size: cover;
        background-repeat: no-repeat;
        margin-bottom: 18px;
      }
      .name {
        font-size: 16px;
        text-align: center;
        margin-bottom: 10px;
        @include textOver();
      }
      .author {
        font-size: 14px;
        @include textOver();
        color: $secFont;
        text-align: center;
      }
    }
  }
}

.mdList10{
   .filterNav{
      margin-bottom: 32px;
   }
     .row {
       margin-left: -26px;
       margin-right: -26px;
     }
     .item {
       float: left;
       width: 417px;
       margin: 0 26px 48px 26px;
       .bookImg {
         width: 130px;
         height: 172px;
         background-size: cover;
         background-repeat: no-repeat;
         margin-right: 10px;
         float: left;
       }
       .info{
         width: 277px;
         float: left;
         .name {
           font-size: 16px;
           margin-bottom: 24px;
           padding-top: 2px;
           @include textOver();
         }
         .author {
           font-size: 14px;
           @include textOver();
           color: $secFont;
           margin-bottom: 5px;
         }
         .pub{
           margin-bottom: 5px;
         }
         .dec-audio{
           height: 45px;
           overflow: hidden;
           line-height: 1.8;
           margin-bottom: 17px;
         }
         .dec{
            height: 69px;
            overflow: hidden;
            line-height: 1.8;
         }
       }
     }
}
.mdList20{
  .filterNav{
    margin-bottom: 32px;
  }
  .row {
    margin-left: -29px;
    margin-right: -29px;
  }
  .item {
    float: left;
    width: 131px;
    height: 245px;
    margin: 0 29px;
    .bookImg {
      width: 100%;
      height: 170px;
      background-size: cover;
      background-repeat: no-repeat;
      margin-bottom: 15px;
    }
    .name {
      font-size: 16px;
      text-align: center;
      margin-bottom: 10px;
      @include textOver();
    }
  }
}

.mdList12{
  .filterData{
    margin-bottom: 34px;
  }
  .row {
    margin-left: -27px;
    margin-right: -27px;
  }
  .item {
    float: left;
    width: 181px;
    height: 348px;
    margin: 0 27px;
    position: relative;
    overflow: hidden;
    &:hover {
      .mer {
        bottom: 104px;
        opacity: 1;
      }
    }
    .mer {
      position: absolute;
      left:0;
      right: 0;
      bottom: 0px;
      height: 36px;
      background: rgba(0,0,0,0.2);
      line-height: 36px;
      text-align: right;
      color:#ff9f2d;
      padding-right: 10px;
      transition:  all 0.2s;
      opacity: 0;
      > span {
          font-size: 20px;
         cursor: pointer;
      }
    }
    .bookImg {
      width: 100%;
      height: 240px;
      background-size: cover;
      background-repeat: no-repeat;
      margin-bottom: 15px;
    }
    .name {
      font-size: 16px;
      text-align: center;
      margin-bottom: 10px;
      @include textOver();
    }
    .data{
      text-align: center;
      color: $secFont;
    }
  }
}

.mdList16{
  .filterData{
    margin-bottom: 34px;
  }
  .row {
    margin-left: -12px;
    margin-right: -12px;
  }
  .item {
    float: left;
    width: 203px;
    height: 218px;
    margin: 0 12px;
    .bookImg {
      width: 100%;
      height: 136px;
      background-size: cover;
      background-repeat: no-repeat;
      margin-bottom: 15px;
    }
    .name {
      font-size: 16px;
      text-align: center;
      margin-bottom: 10px;
      @include textOver();
    }
  }
}

.mdSearch20{
   padding-top: 30px;
  .row {
    margin-left: -38px;
    margin-right: -38px;
  }
  .item {
    float: left;
    width: 179px;
    height: 367px;
    margin: 0 38px;
    .bookImg {
      width: 100%;
      height: 240px;
      background-size: cover;
      background-repeat: no-repeat;
      margin-bottom: 22px;
    }
    .name {
      font-size: 16px;
      text-align: center;
      margin-bottom: 10px;
      @include textOver();
    }
    .data {
      text-align: center;
      color:$secFont;
    }
  }
}

.mdBlock2-5{
  .row {
    margin-left: -25px;
    margin-right: -25px;
  }
  .item {
    float: left;
    width: 137px;
    height: 266px;
    margin: 0 25px;
    &:hover{
      .bookImg .mask {
         display: block;
       }
    }
    .bookImg {
      width: 100%;
      height: 180px;
      background-size: cover;
      background-repeat: no-repeat;
      margin-bottom: 20px;
      position: relative;
      .mask {
        height: 100%;
        width: 100%;
        position: absolute;
        left: 0;
        right: 0;
        top:0;
        background-color: rgba(0,0,0,0.4);
        display: none;
        .delete {
          position: absolute;
          cursor: pointer;
          right: 4px;
          top:4px;
          border-radius: 4px;
          background-color: #000;
          color:#fff;
          background-color: rgba(0,0,0,0.2);
          font-size: 14px;
          padding: 3px 15px;
          .iconfont {
             font-size: 10px;
          }
        }
      }
    }
    .name {
      font-size: 16px;
      text-align: center;
      margin-bottom: 10px;
      @include textOver();
    }
    .author {
      font-size: 14px;
      @include textOver();
      color: $secFont;
      text-align: center;
    }
  }
}

.mdBlock2-4{
  .row {
    margin-left: -21px;
    margin-right: -21px;
  }
  .item {
    float: left;
    width: 190px;
    height: 230px;
    margin: 0 21px;
    &:hover{
      .bookImg .mask {
        display: block;
      }
    }
    .bookImg {
      width: 100%;
      height: 140px;
      background-size: cover;
      background-repeat: no-repeat;
      margin-bottom: 20px;
      position: relative;
      .mask {
        height: 100%;
        width: 100%;
        position: absolute;
        left: 0;
        right: 0;
        top:0;
        background-color: rgba(0,0,0,0.4);
        display: none;
        .delete {
          position: absolute;
          cursor: pointer;
          right: 4px;
          top:4px;
          border-radius: 4px;
          background-color: #000;
          color:#fff;
          background-color: rgba(0,0,0,0.2);
          font-size: 14px;
          padding: 3px 15px;
          .iconfont {
            font-size: 10px;
          }
        }
      }
    }
    .name {
      font-size: 16px;
      text-align: center;
      margin-bottom: 10px;
      @include textOver();
    }
    .author {
      font-size: 14px;
      color: $secFont;
      text-align: center;
      @include textOver();
    }
  }
}

